<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>注册</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" type="text/css" rel="stylesheet">
    <link href="css/login.css" type="text/css"  rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>

</head>
<body>
<div class="container  text-center">
    <div id="errorMsg" class="alert alert-danger"></div>
    <form id="editForm" action="" method="post" accept-charset="utf-8">
        <input type="hidden" name="roles"/>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">学号</span>
            <input type="text" name="stu_no" id="stu_no" class="form-control" placeholder="例：S1907023">
        </div>
        <br>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">密码</span>
            <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
        </div>
        <br>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">姓名</span>
            <input type="text" name="name" id="name" class="form-control"  placeholder="例：张三">
        </div>
        <br>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">专业</span>
            <input type="text" name="major" id="major" class="form-control"  placeholder="例：计算机">
        </div>
        <br>
        <button type="button" class="btn btn-success" data-loading-text="Loading..." autocomplete="off" id="btn_sub">注册</button>
    </form>

</div>
<script>
    $(function () {
        $("#errorMsg").hide()
    });

    function checkUsername() {
        var username = $("#stu_no").val();
        var reg_username = /^\w{6,20}$/;
        var flag = reg_username.test(username);
        if(flag){
            $("#stu_no").css("border","");
        }else{
            $("#stu_no").css("border","1px solid red");
        }
        return flag;
    }

    function checkPassword() {
        var password = $("#password").val();
        var reg_password = /^\w{6,20}$/;
        var flag = reg_password.test(password);
        if(flag){
            $("#password").css("border","");
        }else{
            $("#password").css("border","1px solid red");
        }
        return flag;
    }

    function checkName() {
        var name = $("#name").val();
        var flag = name.length > 0;
        if(flag){
            $("#name").css("border","");
        }else{
            $("#name").css("border","1px solid red");
        }
        return flag;
    }

    function checkMajor() {
        var name = $("#major").val();
        var flag = name.length > 0;
        if(flag){
            $("#major").css("border","");
        }else{
            $("#major").css("border","1px solid red");
        }
        return flag;
    }

    $("#btn_sub").click(function () {
        if(checkUsername() && checkPassword() && checkName() && checkMajor()) {
            var $btn = $(this).button('loading')
            //发送ajax请求提交表单数据
            $.post("user/regist", $("#editForm").serialize(), function (data) {
                $btn.button('reset')
                if (data.flag) {
                    //注册成功，跳转到登录页面
                    location.href = "login.html"
                } else {
                    $("#errorMsg").show()
                    $("#errorMsg").html(data.errorMsg);
                }
            })
        }
    });
</script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>